<template lant="html">
  <div>
    is
    <button @click="change(1)" class="btn btn-success">组件1</button>
    <button @click="change(2)" class="btn btn-success">组件2</button>

    <child1></child1>
    <child2></child2>

    <h5>is方法调用组件</h5>

    <p is="child1"></p>
    <p is="child2"></p>

    <h3>is方法动态调用组件</h3>
    <s :is="currentCom"></s>
  </div>
</template>

<script>
  import Child1 from '@/page/com/isChild1'
  import Child2 from '@/page/com/isChild2'
  export default {
    data(){
      return {
        currentCom: 'child1'
      }
    },
    components: {
      Child1,
      Child2
    },
    methods: {
      change(index){
        if (index == 1) {
          this.currentCom = 'child1'
        } else {
          this.currentCom = 'child2'
        }
      }
    }
  }
</script>
<style lang="css">

</style>
